<template>
  <Layout
    :is-tip-slide="layoutStatus.isTipSlide"
    :is-meteor="layoutStatus.isMeteor"
    :music-bottom-position="layoutStatus.musicButtonPosition"
  />
  <Enter
    v-if="ReportProgess[reportProgessKey] === 0"
    @enter="handleNextPage"
    :loading="statsLoading"
  />
  <Hello
    v-else-if="ReportProgess[reportProgessKey] === 1"
    :stats="stats"
    @slide-up="handleNextPage"
  />
  <Ichangan
    v-else-if="ReportProgess[reportProgessKey] === 2"
    :stats="stats"
    @slide-up="handleNextPage"
    @slide-down="handlePrePage"
  />
  <Event
    v-else-if="ReportProgess[reportProgessKey] === 3"
    @slide-up="handleNextPage"
    @slide-down="handlePrePage"
  />
  <Join
    v-else-if="ReportProgess[reportProgessKey] === 4"
    :stats="stats"
    @slide-up="handleNextPage"
    @slide-down="handlePrePage"
  />
  <System
    v-else-if="ReportProgess[reportProgessKey] === 5"
    :stats="stats"
    @slide-up="handleNextPage"
    @slide-down="handlePrePage"
  />

  <Work
    v-else-if="ReportProgess[reportProgessKey] === 6"
    :stats="stats"
    @slide-up="handleNextPage"
    @slide-down="handlePrePage"
  />
  <Attendance
    v-else-if="ReportProgess[reportProgessKey] === 7"
    :stats="stats"
    @slide-up="handleNextPage"
    @slide-down="handlePrePage"
  />
  <Partner
    v-else-if="ReportProgess[reportProgessKey] === 8"
    :stats="stats"
    @slide-up="handleNextPage"
    @slide-down="handlePrePage"
  />
  <Travel
    v-else-if="ReportProgess[reportProgessKey] === 9"
    :stats="stats"
    @slide-up="handleNextPage"
    @slide-down="handlePrePage"
  />
  <Melody
    v-else-if="ReportProgess[reportProgessKey] === 10"
    @click-button="handleNextPage"
    @slide-down="handlePrePage"
  />
  <Share
    v-else-if="ReportProgess[reportProgessKey] === 11"
    :keyword="stats?.keyword"
    :stats="stats"
    @click-button="handleNextPage"
  />
</template>

<script lang="ts" setup>
import { ref, reactive, watch, onMounted } from "vue";
import { ReportProgess } from "@/enums/report";
import { getYearReportStats } from "@/api/report";
import { initCordovaConfig } from "@/utils/base/base-init";
import { changeStatusBarColor } from "@/cordova/common";
import { initChanganInfo } from "@/utils/base/changan-info-util";
import { Toast } from "vant";
import { getUserStats, setUserStats } from "@/utils/base/common-storage";
import { formatReportStats } from "@/utils/report/fomatRawData";

onMounted(async () => {
  initCordovaConfig();
  changeStatusBarColor([68, 168, 252, 1]);
  await initChanganInfo();

  if (getUserStats()) {
    stats.value = getUserStats();
    statsLoading.value = false;
    return;
  } else {
    const raw = await getYearReportStats()
      .catch(() => {
        Toast.fail("获取用户信息失败");
      })
      .finally(() => {
        statsLoading.value = false;
      });

    if (raw.code === 0) {
      console.log("raw", raw);
      stats.value = formatReportStats(raw);

      setUserStats(stats.value);
    } else {
      Toast.fail(raw.msg || "请求失败");
    }
  }
  console.log("----stats----", stats.value);
});

const stats = ref();
const statsLoading = ref(false);

const layoutStatus = reactive({
  isTipSlide: true,
  isMeteor: true,
  musicButtonPosition: "high" as "high" | "low",
});

const reportProgessKey = ref<keyof typeof ReportProgess>("Enter");
const reportProgessStep = ref(0);

// // 监听是否在进入页面，layout样式做修改
watch(
  reportProgessKey,
  (n) => {
    layoutStatus.isMeteor = n !== "Enter";
    layoutStatus.isTipSlide = n !== "Enter" && n !== "Melody" && n !== "Share";
    layoutStatus.musicButtonPosition = n === "Enter" ? "low" : "high";
  },
  {
    immediate: true,
  }
);

const handleNextPage = () => {
  console.log("handleNext page");

  if (
    reportProgessStep.value === 5 &&
    stats.value?.earlyAttendanceDays === 0 &&
    stats.value?.lateAttendaceDays === 0
  ) {
    reportProgessStep.value++;
  }
  reportProgessStep.value++;
  reportProgessKey.value = ReportProgess[reportProgessStep.value] as any;
};

const handlePrePage = () => {
  if (reportProgessStep.value !== 0) {
    reportProgessStep.value--;
    reportProgessKey.value = ReportProgess[reportProgessStep.value] as any;
  }
};
</script>

<script lang="ts">
import Layout from "@/components/Layout/index.vue";
import Enter from "./components/Enter/index.vue";
import Hello from "./components/Hello/index.vue";
import Ichangan from "./components/Ichangan/index.vue";
import Event from "./components/Event/index.vue";
import Join from "./components/Join/index.vue";
import System from "./components/System/index.vue";
import Work from "./components/Work/index.vue";
import Attendance from "./components/Attendance/index.vue";
import Partner from "./components/Partner/index.vue";
import Travel from "./components/Travel/index.vue";
import Melody from "./components/Melody/index.vue";
import Share from "./components/Share/index.vue";

export default {
  name: "ReportPage1",
  components: {
    Layout,
    Enter,
    Hello,
    Ichangan,
    Event,
    Join,
    System,
    Work,
    Attendance,
    Partner,
    Travel,
    Melody,
    Share,
  },
};
</script>

<style lang="scss" scoped>
div {
  color: red;
}
</style>
